<template>
  <van-popup v-model:show="isShow" class="hobby-popup" position="left">
    <CheckBlockGroup v-model:checked="selectedHobby">
      <CheckBlock v-for="(item,index) in hobby" :key="index" :title="item.hobbyName" :icon="item.imageUrl"/>
    </CheckBlockGroup>
    <div class="hobby-popup-submit" @click="handleSubmit">
      <span>选好了({{selectedHobby.length}})</span>
    </div>
  </van-popup>
</template>
<script>
import { Popup, Notify } from "vant"
import CheckBlockGroup from "@/components/CheckBlockGroup.vue";
import CheckBlock from "@/components/CheckBlock.vue";
import { getHobby, updateUserHobby } from "@/service/user";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  setup(){
    const store = useStore();
    const router = useRouter();
    const hobby = ref('');
    const selectedHobby = ref(store.state.userHobby);
    const isShow = ref(true);
    const handleSubmit = ()=>{
      selectedHobby.value.length > 0 ? updateUserHobby(selectedHobby.value).then(res=>{
        res.status == 200 && router.push({
          path:"/discovery"
        })
      }): Notify("至少选择一个爱好!")
    }
    onMounted(()=>{
      getHobby().then(res=>{
        hobby.value = res;
      })
    })
    return {
      hobby,
      isShow,
      selectedHobby,
      handleSubmit
    }
  },
  components:{
    CheckBlockGroup,
    CheckBlock,
    [Popup.name]:Popup
  }
}
</script>
<style lang="less">
.hobby-popup{
  width: 100%;
  height: 100%;
  .hobby-popup-submit{
    padding:30px;
    background: #41B783;
    color: white;
    font-size:30px;
  }
}
</style>